<template>
    <div class="table-page">
        <div class="table-search-box" @keyup.enter="search()">
            <div class="search-item">
                <label>所属科目：</label>
                <div class="table-query-input">
                    <category-select
                        :category-id.sync="queryData.categoryId"
                        :props="{}"
                    />
                </div>
            </div>
            <div class="search-item">
                <label>直播标题：</label>
                <div class="table-query-input">
                    <el-input
                        v-model="queryData.title"
                        placeholder="请输入视频名称"
                        clearable
                    ></el-input>
                </div>
            </div>
            <div class="search-item">
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    :loading="tableLoading"
                    @click="clickSearch()"
                >搜索
                </el-button>
            </div>
            <div class="search-item">
                <el-button
                    icon="el-icon-refresh"
                    :loading="tableLoading"
                    @click="resetSearch()"
                >重置
                </el-button>
            </div>
        </div>
        <div class="table-operation-box">
            <el-button
                plain
                style="margin-bottom: 2em"
                icon="el-icon-add"
                @click="clickAdd('新增直播', () => {})"
            >新增直播
            </el-button>
            <el-button
                type="danger"
                plain
                style="margin-bottom: 2em"
                icon="el-icon-delete"
                :disabled="selectDisable"
                @click="
                    tableDelete(
                        '/kc/course/live/deletes',
                        {
                            ids: tableSelect
                        },
                        true
                    )
                "
            >批量删除
            </el-button>

        </div>

        <div class="table-data-box">
            <el-table
                ref="table"
                v-loading="tableLoading"
                :data="tableData"
                border
                style="width: 100%;min-height:40em"
                row-key="videoId"
                @selection-change="tableSelectionChange"
            >
                <el-table-column type="selection" width="55" align="center">
                </el-table-column>
                <el-table-column
                    prop="title"
                    label="直播标题"
                    width="200"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="categoryName"
                    label="所属分类"
                    width="150"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="teacherName"
                    label="讲师"
                    width="150"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="teacherName"
                    label="直播时间"
                    width="250"
                    align="center"
                >
                    <template
                        slot-scope="scope"
                    >
                        {{ scope.row.liveDate }}  {{ scope.row.startTime }} - {{ scope.row.endTime }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="sort"
                    label="排序"
                    width="180">

                    <template
                        slot-scope="scope"
                        v-loading="scope.row.opLoading"
                    >
                        <div
                            v-show="!scope.row.sortEdit"
                            @dblclick="scope.row.sortEdit = true"
                        >
                            {{ scope.row.sort }}
                        </div>
                        <el-input
                            v-show="scope.row.sortEdit"
                            v-model="scope.row.sort"
                            @blur="
                            sortEditSave(
                                '/kc/course/live/change-sort',
                                scope.row
                            )
                        "
                        ></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="createdTime"
                    label="创建时间"

                    align="center"
                >
                </el-table-column>
                <el-table-column label="操作" width="300" align="center">
                    <template slot-scope="scope">
                        <el-button
                            v-if="!scope.row.edit"
                            class="primary"
                            size="mini"
                            type="text"
                            icon="el-icon-view"
                            :loading="scope.row.opLoading"
                            @click="urlTake(scope.row.livePath)"
                        >预览
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-if="pageData.total" class="xy-between table-page-box">
            <el-pagination
                background
                :current-page.sync="pageData.currentPage"
                :page-sizes="pageData.pageSizes"
                :page-size.sync="pageData.pageSize"
                layout="total,  prev, pager, next, sizes, jumper"
                :total="pageData.total"
            >
            </el-pagination>
        </div>

        <el-dialog
            :title="dialogFormTitle"
            :visible.sync="dialogFormVisible"
            custom-class="two-dialog"
            width="50%"
        >
            <el-form
                ref="dataForm"
                :model="dataForm"
                label-width="6em"
                class="table-edit-from"

            >
                <div class="xy-between">
                    <el-form-item label="所属科目" prop="categoryId">
                        <category-select
                            :category-id.sync="dataForm.categoryId"

                            :props="{}"
                        />
                    </el-form-item>
                </div>
                <div class="row">
                    <el-form-item label="直播标题" prop="title">
                        <el-input v-model="dataForm.title"></el-input>
                    </el-form-item>
                </div>
                <div>
                    <el-form-item label="讲师" prop="teacherName">
                        <el-input v-model="dataForm.teacherName"></el-input>
                    </el-form-item>
                </div>
                <div class="row">
                    <el-form-item label="直播链接" prop="livePath">
                        <el-input v-model="dataForm.livePath"></el-input>
                    </el-form-item>
                </div>
                <div class="row">
                    <el-form-item label="排序" prop="sort">
                        <el-input v-model="dataForm.sort"></el-input>
                    </el-form-item>
                </div>
                <div class="row">
                    <el-form-item label="直播封面" prop="coverImg">
                        <el-upload ref="upload"  action="#" list-type="picture-card"
                                   :http-request="customUpload1" :limit="1">
                            <i class="el-icon-plus"></i>
                        </el-upload>

                    </el-form-item>

                </div>
                <div class="row">
                    <el-form-item label="老师封面" prop="teacherImg">
                        <el-upload ref="upload"  action="#" list-type="picture-card"
                                   :http-request="customUpload2" :limit="1">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                    </el-form-item>

                </div>
                <div class="row">
                    <el-form-item label="直播日期" prop="liveDate">
                        <el-date-picker
                            v-model="dataForm.liveDate"
                            align="right"
                            type="date"
                            placeholder="选择日期"
                            :picker-options="pickerOptions"
                            format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd"
                        >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="具体时间" prop="liveDate">
                        <el-time-picker
                            v-model="dataForm.startTime"
                            placeholder="任意时间点"
                            value-format="HH:mm:ss"
                        >
                        </el-time-picker>
                        -
                        <el-time-picker
                            arrow-control
                            v-model="dataForm.endTime"
                            placeholder="任意时间点"
                            value-format="HH:mm:ss"
                        >
                        </el-time-picker>
                    </el-form-item>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button :loading="submitFlag" @click="dialogClose"
                >取 消</el-button
                >
                <el-button
                    :loading="submitFlag"
                    type="primary"
                    @click="
                        formDataSave('/kc/course/live/update')
                    "
                >保 存</el-button
                >
            </span>

        </el-dialog>
    </div>
</template>

<script>
import {TablePage} from "@/layout/mixin/iVue.js";
import {mapState} from "vuex";
import {get, put, post} from "@/api/request";
import CategorySelect from "@/components/CategorySelect.vue";
import { ossUpload } from "@/utils/file";
import {uploadQrCode} from "@/api/user";

export default {
    name: "liveList",
    components: {CategorySelect},
    mixins: [TablePage],
    data() {
        let self = this;
        return {

            queryData: {
            },
            pickerOptions: {
                shortcuts: [{
                    text: "今天",
                    onClick(picker) {
                        picker.$emit("pick", new Date());
                    }
                }, {
                    text: "昨天",
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit("pick", date);
                    }
                }, {
                    text: "一周前",
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit("pick", date);
                    }
                }]
            },
        };
    },
    computed: {
        ...mapState({
            uploadStatus: state => state.status.uploadStatus,
        })
    },
    watch: {
        "queryData.categoryId"(categoryId) {
            if (!categoryId) {
                this.chapterData = [];
            } else {
                this.loadChapterTree(categoryId);
            }
        }
    },
    created() {
    },
    mounted() {
    },
    methods: {
        search(queryData)  {
            this.loadTable("/kc/course/live/page", queryData);
        },
        urlTake(path){
            window.open(path, "_blank");
        },
        customUpload1(options) {
            ossUpload('cdn', options.file.name, options.file, (process) => {
                // console.log('=======' + process)
            }, (client) => {
                // url = this.$store.state.systemImageConfig[0].imagesHost + client.options.path
                this.$set(this.dataForm, 'coverImg', this.$store.state.systemImageConfig[0].imagesHost + client.options.path)

            }).catch(_ => {
                this.$message.error('上传失败!');
            })
        },
        customUpload2(options) {
            ossUpload('cdn', options.file.name, options.file, (process) => {
                // console.log('=======' + process)
            }, (client) => {
                // url = this.$store.state.systemImageConfig[0].imagesHost + client.options.path
                this.$set(this.dataForm, 'teacherImg', this.$store.state.systemImageConfig[0].imagesHost + client.options.path)

            }).catch(_ => {
                this.$message.error('上传失败!');
            })
        },
    }
};
</script>
